<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body>
<style>

    body {
        margin : 0;
    }

    .title {
        border-bottom: 1px solid;
        padding: 5px 20px;
        margin-bottom: 24px;
        font-weight: bold;
        font-size : 14px;
    }

    #mail-titles {
        vertical-align: top;
        width: 20%;
        margin : 0;
        display: inline-block;
    }

    #mail-titles .active {
        color: #D68900;
    }

    #mail-titles > div {
        border-bottom: 1px solid #ddd;
        padding: 5px 5px 5px 20px;
        word-break: break-all;
    }

    #mail {
        margin : 0;
        width : 75%;
        display: inline-block;
        border-left: 1px solid #ddd;
        overflow: hidden;
    }

    #mail > table td {
        padding: 10px;
        word-break: break-all;
    }

    .label {
        width : 80px;
        color: #666;
    }
</style>
<p class="title">邮件测试系统 <button style="float:right" onclick='clear_mail()'>删除所有邮件</button></p>
<div id="mail-titles"></div>
<div id="mail"></div>
<script src="js/jquery-2.1.4.js"></script>

<script>

    function clear_mail(){
        $.post("/mail/clear", null, function(data){
            if(data == "ok"){
                location.reload();
            }else {
                alert("出错了");
            }
        });
    }

    var mails = [];

    function render() {
        render_mail(0);
    }

    function format(string, obj) {
        return string.replace(/\{([0-9A-Za-z_]+)\}/g, function (m, i) {
            //m：{abc}{name} ; i: abc name
            return obj[i];
        });
    }

    function render_mail(index) {
        console.log("length=" + mails.length);

        var html = "";

        if (mails.length == 0) {
            html = "<div>没有邮件</div>";
        } else {
            for (var i = 0; i < mails.length; i++) {
                var mail = mails[i];
                if (i == index) {
                    html += formatByNumber("<div class='active' onclick='render_mail({0})'>{1}</div>", i, mail.subject);
                } else {
                    html += formatByNumber("<div onclick='render_mail({0})'>{1}</div>", i, mail.subject);
                }
            }
        }

        $("#mail-titles").html(html);

        var html = "";
        if (mails.length > 0) {
            var mail = mails[index];
            html += format("<table>" +
                "<tr><td class='label'>发件人</td><td>{from}</td></tr>" +
                "<tr><td class='label'>收件人</td><td>{to}</td></tr>" +
                "<tr><td class='label'>主题</td><td>{subject}</td></tr>" +
                "<tr><td class='label'>邮件内容</td><td>{content}</td></tr>" +
                "</table>", mail);
        }

        $("#mail").html(html);
    }

    function formatByNumber(src) {
        if (arguments.length == 0) return "";
        var args = Array.prototype.slice.call(arguments, 1);
        return src.replace(/\{(\d+)\}/g, function (m, i) {
            var val = args[i];
            if (val === undefined || val == null) {
                val = "";
            }
            return val;
        });
    }

    $.getJSON("/mail/list", null, function (data) {
        mails = data;
        render();
    });
</script>
</body>
</html>
